<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/icons.css">
    <script src="js/jquery-1.10.2.min.js"></script>

    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if ($(document).scrollTop() === 0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->
</head>

<style>
    #about #sec02 .bg:before {
        content: "";
        position: absolute;
        background-color: #f4f4f4;
        left: 200px;
        top: -75px;
        width: 150%;
        height: calc(150% + 50px);
        margin-top: 50px;
        margin-bottom: 100px;
    }
</style>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top">
    <div id="header--bg">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><a href="./index.html#about"><img src="./images/logo.svg" width="20%"
                                                        style="position: relative;top: -10px;left: 20px"/></a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>

<main id="about">
    <div id="main--image" class="main--about active">
        <div class="container">
            <h2 id="main--text">About</h2>
        </div>
    </div>
    <section id="sec01" style="margin-top: 200px">
        <div class="content-inner-lg-y">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-3" style="
    margin-left: 180px;
">
                        <h3 class="title--secondary mb20 scrt-to-left">Personal</h3>
                        <p>安徽黄山</p>
                        <p>嘉兴学院视觉传达专业</p>
                        <p>双鱼 168cm</p>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <img src="images/about/21.png">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="sec02">
        <div class="content-inner-lg-y">
            <div class="container pos-r bg">
                <div class="row justify-content-end">
                    <div class="col-lg-9 flex-column align-items-end">
                        <div class="row align-items-start" style="margin-bottom: 50px">
                            <h2 style="margin-right: 30px">Cloud</h2>
                            <h3>随拍</h3>
                            <p style="
    position: relative;
    left: 4px;
    top: 3px;">记录美好生活</p>
                        </div>
                        <div class="row justify-content-between">
                            <div class="col-3 ">
                                <img src="images/about/31.png">
                            </div>
                            <div class="col-3">
                                <img src="images/about/32.png">
                            </div>
                            <div class="col-3 ">
                                <img src="images/about/33.png">
                            </div>
                            <div class="col-3 ">
                                <img src="images/about/34.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div style="margin-top: 200px;margin-bottom: 50px;width:100%; height:1px; background:#000000;"></div>
    <div class="container">
        <h3>Favorite</h3>
        <p style="margin-bottom: 20px">百看不厌的喜爱，谁还不是个二次元呢</p>
        <div class="row justify-content-between">
            <div class="col-lg-3 col-6 mb20" style="max-width: 50%;flex: 0 0 40%">
                <div class="card card-gallery">
                    <a href="https://hairmada.com/news/555/" class="card--image"
                       style="background-image: url(images/about/41.png);"></a>
                </div>
                <div class="aside-blog-details">
                    <p style="text-align: center">&lt;海贼王&gt;</p>
                </div>
            </div>
            <div class="col-lg-3 col-6 mb20" style="max-width: 50%;flex: 0 0 40%">
                <div class="card card-gallery">
                    <a href="#" class="card--image" style="background-image: url(images/about/42.png);"></a>
                </div>
                <div class="aside-blog-details">
                    <p style="text-align: center">&lt;神奇宝贝&gt;</p>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top: 50px;margin-bottom: 200px;width:100%; height:1px; background:#000000;"></div>
    <div class="container" style="margin-bottom: 50px;margin-top: 50px">
        <h2>School</h2>
        <p>浙江省嘉兴市南湖区城南街道<br/>
            嘉兴学院梁林校区</p>
        <a href="https://map.baidu.com/search/%E5%98%89%E5%85%B4%E5%AD%A6%E9%99%A2(%E6%A2%81%E6%9E%97%E6%A0%A1%E5%8C%BA)/@13438471.939509632,3577565.17,17.07z?querytype=s&da_src=shareurl&wd=%E5%98%89%E5%85%B4%E5%AD%A6%E9%99%A2(%E6%A2%81%E6%9E%97%E6%A0%A1%E5%8C%BA)&c=131&src=0&wd2=%E5%98%89%E5%85%B4%E5%B8%82%E5%8D%97%E6%B9%96%E5%8C%BA&pn=0&sug=1&l=12&b=(12906758.56,4797059.47;13011718.56,4853635.47)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=18a9dac9330a61a80ab93a96&device_ratio=2"
           class="btn has-arrow-right">Map</a>
    </div>

</main>


<footer id="footer" style="margin-top: 300px">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>